Node / ReticulumProjects / MeshChatX.git / files / meshchatx / src / frontend / components / messages / modals / ConversationImageModal.vue

Displaying Raw • Download

T8b949e<!-- SPDX-License-Identifier: 0BSD -->

Tb4b4b4<Tff7b72templateTb4b4b4>

Tb4b4b4<Tff7b72Transition

Te6edf3enter-active-classTff7b72=Ta5d6ff"transition ease-out duration-200"

Te6edf3enter-from-classTff7b72=Ta5d6ff"opacity-0"

Te6edf3enter-to-classTff7b72=Ta5d6ff"opacity-100"

Te6edf3leave-active-classTff7b72=Ta5d6ff"transition ease-in duration-150"

Te6edf3leave-from-classTff7b72=Ta5d6ff"opacity-100"

Te6edf3leave-to-classTff7b72=Ta5d6ff"opacity-0"

Tb4b4b4>

Tb4b4b4<Tff7b72div

Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3urlTa5d6ff"

Te6edf3refTff7b72=Ta5d6ff"imageModalOverlay"

Te6edf3tabindexTff7b72=Ta5d6ff"0"

Te6edf3classTff7b72=Ta5d6ff"fixed inset-0 z-50 flex items-center justify-center bg-black/80 dark:bg-black/90 backdrop-blur-xs p-4 pt-[max(1rem,env(safe-area-inset-top))] pb-[max(1rem,env(safe-area-inset-bottom))] outline-hidden"

Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3$emitTb4b4b4(Ta5d6ff'close'Tb4b4b4)Ta5d6ff"

Tb4b4b4@Te6edf3keydownTb4b4b4.Te6edf3leftTb4b4b4.Te6edf3preventTff7b72=Ta5d6ff"Te6edf3$emitTb4b4b4(Ta5d6ff'navigate'Tb4b4b4, Tff7b72-T79c0ff1Tb4b4b4)Ta5d6ff"

Tb4b4b4@Te6edf3keydownTb4b4b4.Te6edf3rightTb4b4b4.Te6edf3preventTff7b72=Ta5d6ff"Te6edf3$emitTb4b4b4(Ta5d6ff'navigate'Tb4b4b4, T79c0ff1Tb4b4b4)Ta5d6ff"

Tb4b4b4@Te6edf3keydownTb4b4b4.Te6edf3escapeTb4b4b4.Te6edf3preventTff7b72=Ta5d6ff"Te6edf3$emitTb4b4b4(Ta5d6ff'close'Tb4b4b4)Ta5d6ff"

Tb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"relative max-w-7xl max-h-full group/image-modal" @Te6edf3click.Te6edf3stopTb4b4b4>

Tb4b4b4<Tff7b72button

Te6edf3typeTff7b72=Ta5d6ff"button"

Te6edf3classTff7b72=Ta5d6ff"absolute -top-12 left-0 inline-flex items-center justify-center w-10 h-10 rounded-xl bg-white/10 dark:bg-zinc-900/10 hover:bg-white/20 dark:hover:bg-zinc-900/20 text-white transition-colors opacity-0 group-hover/image-modal:opacity-100 focus:opacity-100"

Tb4b4b4:Te6edf3titleTff7b72=Ta5d6ff"Te6edf3$tTb4b4b4(Ta5d6ff'messages.save_image_to_device'Tb4b4b4)Ta5d6ff"

Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3$emitTb4b4b4(Ta5d6ff'download'Tb4b4b4)Ta5d6ff"

Tb4b4b4>

Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"download" Te6edf3classTff7b72=Ta5d6ff"size-5" Tb4b4b4/Tb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>

Tb4b4b4<Tff7b72button

Te6edf3typeTff7b72=Ta5d6ff"button"

Te6edf3classTff7b72=Ta5d6ff"absolute -top-12 right-0 inline-flex items-center justify-center w-10 h-10 rounded-xl bg-white/10 dark:bg-zinc-900/10 hover:bg-white/20 dark:hover:bg-zinc-900/20 text-white transition-colors"

Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3$emitTb4b4b4(Ta5d6ff'close'Tb4b4b4)Ta5d6ff"

Tb4b4b4>

Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"close" Te6edf3classTff7b72=Ta5d6ff"size-5" Tb4b4b4/Tb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>

Tb4b4b4<Tff7b72button

Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3gallery Tff7b72&& Te6edf3galleryTb4b4b4.Te6edf3length Tff7b72> T79c0ff1Ta5d6ff"

Te6edf3typeTff7b72=Ta5d6ff"button"

Te6edf3classTff7b72=Ta5d6ff"absolute left-0 top-1/2 z-10 -translate-y-1/2 inline-flex items-center justify-center w-11 h-11 rounded-full bg-black/40 hover:bg-black/55 text-white transition-colors"

Te6edf3aria-labelTff7b72=Ta5d6ff"Previous image"

Tb4b4b4@Te6edf3clickTb4b4b4.Te6edf3stopTff7b72=Ta5d6ff"Te6edf3$emitTb4b4b4(Ta5d6ff'navigate'Tb4b4b4, Tff7b72-T79c0ff1Tb4b4b4)Ta5d6ff"

Tb4b4b4>

Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"chevron-left" Te6edf3classTff7b72=Ta5d6ff"size-7" Tb4b4b4/Tb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>

Tb4b4b4<Tff7b72button

Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3gallery Tff7b72&& Te6edf3galleryTb4b4b4.Te6edf3length Tff7b72> T79c0ff1Ta5d6ff"

Te6edf3typeTff7b72=Ta5d6ff"button"

Te6edf3classTff7b72=Ta5d6ff"absolute right-0 top-1/2 z-10 -translate-y-1/2 inline-flex items-center justify-center w-11 h-11 rounded-full bg-black/40 hover:bg-black/55 text-white transition-colors"

Te6edf3aria-labelTff7b72=Ta5d6ff"Next image"

Tb4b4b4@Te6edf3clickTb4b4b4.Te6edf3stopTff7b72=Ta5d6ff"Te6edf3$emitTb4b4b4(Ta5d6ff'navigate'Tb4b4b4, T79c0ff1Tb4b4b4)Ta5d6ff"

Tb4b4b4>

Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"chevron-right" Te6edf3classTff7b72=Ta5d6ff"size-7" Tb4b4b4/Tb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>

Tb4b4b4<Tff7b72div

Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3gallery Tff7b72&& Te6edf3galleryTb4b4b4.Te6edf3length Tff7b72> T79c0ff1Ta5d6ff"

Te6edf3classTff7b72=Ta5d6ff"pointer-events-none absolute bottom-2 left-1/2 z-10 -translate-x-1/2 rounded-full bg-black/50 px-3 py-1 text-xs font-medium text-white"

Tb4b4b4>

Tff7b72{{ Te6edf3index Tff7b72+ T79c0ff1 Tff7b72}} / Tff7b72{{ Te6edf3galleryTb4b4b4.Te6edf3length Tff7b72}}

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72img

Tb4b4b4:Te6edf3srcTff7b72=Ta5d6ff"Te6edf3urlTa5d6ff"

Te6edf3classTff7b72=Ta5d6ff"max-w-full max-h-[90vh] rounded-xl shadow-2xl"

Te6edf3altTff7b72=Ta5d6ff"Image preview"

Tb4b4b4@Te6edf3contextmenuTb4b4b4.Te6edf3preventTb4b4b4.Te6edf3stopTff7b72=Ta5d6ff"Te6edf3$emitTb4b4b4(Ta5d6ff'contextmenu'Tb4b4b4, Te6edf3$eventTb4b4b4)Ta5d6ff"

Tb4b4b4/Tb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72TransitionTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72templateTb4b4b4>

Tb4b4b4<Tff7b72scriptTb4b4b4>

Tff7b72import Te6edf3MaterialDesignIcon Tff7b72from Ta5d6ff"../../MaterialDesignIcon.vue"Tb4b4b4;

Tff7b72export Tff7b72default Tb4b4b4{

Te6edf3nameTff7b72: Ta5d6ff"ConversationImageModal"Tb4b4b4,

Te6edf3componentsTff7b72: Tb4b4b4{

Te6edf3MaterialDesignIconTb4b4b4,

Tb4b4b4}Tb4b4b4,

Te6edf3propsTff7b72: Tb4b4b4{

Te6edf3urlTff7b72: Tb4b4b4{

Te6edf3typeTff7b72: Tffa657StringTb4b4b4,

Tff7b72defaultTff7b72: Ta5d6ff""Tb4b4b4,

Tb4b4b4}Tb4b4b4,

Te6edf3galleryTff7b72: Tb4b4b4{

Te6edf3typeTff7b72: Tffa657ArrayTb4b4b4,

Tff7b72defaultTff7b72: Tff7b72nullTb4b4b4,

Tb4b4b4}Tb4b4b4,

Te6edf3indexTff7b72: Tb4b4b4{

Te6edf3typeTff7b72: Tffa657NumberTb4b4b4,

Tff7b72defaultTff7b72: T79c0ff0Tb4b4b4,

Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4,

Te6edf3emitsTff7b72: Tb4b4b4[Ta5d6ff"close"Tb4b4b4, Ta5d6ff"navigate"Tb4b4b4, Ta5d6ff"download"Tb4b4b4, Ta5d6ff"contextmenu"Tb4b4b4]Tb4b4b4,

Te6edf3methodsTff7b72: Tb4b4b4{

Te6edf3focusOverlayTb4b4b4(Tb4b4b4) Tb4b4b4{

Tff7b72thisTb4b4b4.Te6edf3$nextTickTb4b4b4(Tb4b4b4(Tb4b4b4) Tb4b4b4=> Tb4b4b4{

Tff7b72thisTb4b4b4.Te6edf3$refsTb4b4b4.Te6edf3imageModalOverlayTff7b72?Tb4b4b4.Te6edf3focusTff7b72?Tb4b4b4.Tb4b4b4(Tb4b4b4)Tb4b4b4;

Tb4b4b4}Tb4b4b4)Tb4b4b4;

Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4;

Tb4b4b4<Tb4b4b4/Tff7b72scriptTb4b4b4>